<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div class="heade">
        <el-form :inline="true" :model="queryParams" class="demo-form-inline">
            <el-form-item label="学生姓名:">
                <el-input v-model="queryParams.stuName" class="w-50 m-2" size="large" placeholder="输入学生姓名" />
            </el-form-item>
            <el-form-item label="市场部:">
                <el-select v-model="queryParams.origin" clearable placeholder="Select" style="width: 130px;">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="学院:">
                <el-select v-model="queryParams.collegeId" style="width: 135px;">
                    <el-option label="游戏学院" :value="1" />
                    <el-option label="网站工程学院" :value="2" />
                </el-select>
            </el-form-item>
            <el-form-item label="工作城市:">
                <CitySelect v-model="queryParams.workCity" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>
    </div>


</template>
<script setup lang="ts">
import { reactive } from 'vue';
import CitySelect from './City.vue';

let queryParams = reactive<any>({});

const options = [
    {
        value: '招生办',
        label: '招生办'
    },
    {
        value: '晋中市场部',
        label: '晋中市场部'
    }
]
const emit = defineEmits(['handle']);

const onSubmit = () => {
    emit('handle', queryParams);
}
</script>
<style scoped lang="scss">
.heade {
    width: 100%;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    background: #ccc;

    .demo-form-inline {
        margin-top: 10px;
    }
}
</style>